<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模板字符串</title>
		<style type="text/css">
			*{ margin: 0; padding: 0;}
			#box{ width: 100px; height: 100px; border:1px solid #000;}
			.red{ color: red;}
		</style>
	</head>
	<body>
		<div id="box">空白</div>
		<button id="add">添加字符串</button>
		<script>
			let box = document.querySelector("#box");
			let _add = document.querySelector("#add");
			let html = "sdjfkalsdjfa";
			console.log(_add)
			_add.onclick = function(){
				alert("123");
				box.innerHTML = (`
					<div class = "red">${html}</div>
				`)
			}
			
			//通过使用反引号（键盘左上角第二个英文字符），来解析html，并且通过${}里面引用变量对象
		</script>
	</body>
</html>
